<!DOCTYPE html>

<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- <script src="../cdn/vue/vue.global.min.js"></script> -->
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script>
    <!-- <link rel="stylesheet" href="../cdn/element-plus/index.css" />
    <script src="../cdn/element-plus/index.full.min.js"></script> -->
    <link rel="stylesheet" href="../../lib/index.css" />
    <script src="../../lib/avue.js"></script>
    <!-- <script src="../../lib/avue.min.js"></script> -->
  </head>
  <style></style>
  <body>
    <div id="app">
      <el-button @click="add">add</el-button>
      <avue-form
        ref="form"
        v-model="form"
        :submitError="submitError"
        :submitSuccess="submitSuccess"
        :otherPostData="otherPostData"
        :option="option"
        @submit="handleSubmit"
        @operate-click="operateBtnClick"
        @table-title-click="tableTitleClick"
      >
        <!-- <template slot="menuForm">
          <el-button></el-button>
          <el-button></el-button>
        </template> -->
      </avue-form>
    </div>
  </body>
  <script>
    // const option = {
    //         labelPosition: 'right',
    //         labelSuffix: '：',
    //         labelWidth: 120,
    //         gutter: 0,
    //         menuBtn: true,
    //         submitBtn: true,
    //         submitText: '提交',
    //         emptyBtn: true,
    //         emptyText: '清空',
    //         temporaryBtn: true,
    //         temporaryText: '暂存',
    //         menuPosition: 'center',
    //         dicMethod: 'post',
    //         postUrl: '/post/save',
    //         temporaryUrl: '/post/zancun',
    //         dicQuery: {
    //           userId: 21,
    //           contractNum: 'DSY123456'
    //         },
    //         detail: false,
    //         column: [
    //           {
    //             type: 'crud',
    //             label: '基础表格',
    //             prop: 'tableList',
    //             order: 2,
    //             span: 24,
    //             align: 'center',
    //             border: true,
    //             headerAlign: 'center',
    //             index: false,
    //             darkBg: true,
    //             display: true,
    //             labelPosition: 'top',
    //             children: {
    //               column: [
    //                 {
    //                   prop: 'startTime',
    //                   label: '日期11'
    //                 },
    //                 {
    //                   prop: 'contractNo',
    //                   label: '合同编号'
    //                 },
    //                 {
    //                   prop: 'money',
    //                   label: '合同金额',
    //                   type: 'current-input'
    //                 },
    //                 {
    //                   prop: 'belongUser',
    //                   label: '合同管理人'
    //                 },
    //                 {
    //                   prop: 'user',
    //                   label: '创建人'
    //                 },
    //                 {
    //                   prop: 'oprationUser',
    //                   label: '修改人'
    //                 }
    //               ]
    //             }
    //           },
    //           {
    //             type: 'dynamic',
    //             label: '合同信息2',
    //             span: 24,
    //             display: true,
    //             labelPosition: 'top',
    //             labelOperate: true,
    //             labelSlot: [
    //               {
    //                 text: '导出'
    //               },
    //               {
    //                 text: '导入'
    //               }
    //             ],
    //             children: {
    //               align: 'center',
    //               headerAlign: 'center',
    //               index: false,
    //               addBtn: true,
    //               delBtn: true,
    //               operate: true,
    //               type: 'form',
    //               operateBtnList: [
    //                 {
    //                   text: '查看'
    //                 },
    //                 {
    //                   text: '编辑'
    //                 }
    //               ],
    //               column: [
    //                 // {
    //                 //   type: 'input',
    //                 //   label: 'ID',
    //                 //   span: 24,
    //                 //   // display: false,
    //                 //   disabled: true,
    //                 //   prop: 'id'
    //                 // },
    //                 {
    //                   type: 'date',
    //                   label: '日期',
    //                   span: 24,
    //                   display: true,
    //                   format: 'YYYY-MM-DD',
    //                   valueFormat: 'YYYY-MM-DD',
    //                   prop: 'startTime',
    //                   defaultTime: [
    //                     '00:00:00',
    //                     '12:59:59'
    //                   ]
    //                 },
    //                 {
    //                   type: 'input',
    //                   label: '合同编号',
    //                   span: 24,
    //                   display: true,
    //                   prop: 'contractNo'
    //                 },
    //                 {
    //                   type: 'select',
    //                   label: '合同管理人',
    //                   dicData: [
    //                     {
    //                       label: '老张',
    //                       value: '1'
    //                     },
    //                     {
    //                       label: '老李',
    //                       value: '2'
    //                     },
    //                     {
    //                       label: '老郑',
    //                       value: '3'
    //                     }
    //                   ],
    //                   cascader: [],
    //                   span: 24,
    //                   display: true,
    //                   props: {
    //                     label: 'label',
    //                     value: 'value',
    //                     desc: 'desc'
    //                   },
    //                   prop: 'userId'
    //                 },
    //                 {
    //                   type: 'current-input',
    //                   label: '合同金额',
    //                   span: 24,
    //                   display: true,
    //                   prop: 'totalMoney'
    //                 },
    //                 {
    //                   type: 'input',
    //                   label: '合同金额',
    //                   span: 24,
    //                   display: true,
    //                   prop: 'totalMoney1'
    //                 },
    //                 {
    //                   type: 'input',
    //                   label: '合同金额',
    //                   span: 24,
    //                   display: true,
    //                   prop: 'totalMoney2'
    //                 },
    //                 {
    //                   type: 'input',
    //                   label: '合同金额',
    //                   span: 24,
    //                   display: true,
    //                   prop: 'totalMoney3'
    //                 }
    //               ]
    //             },
    //             prop: 'contractList',
    //             order: 1
    //           },
    //           {
    //             type: 'dynamic',
    //             label: '合同信息3',
    //             span: 24,
    //             display: true,
    //             labelPosition: 'top',
    //             children: {
    //               align: 'center',
    //               headerAlign: 'center',
    //               index: false,
    //               addBtn: true,
    //               delBtn: true,
    //               operate: true,
    //               operateBtnList: [
    //                 {
    //                   text: '查看'
    //                 },
    //                 {
    //                   text: '编辑'
    //                 }
    //               ],
    //               column: [
    //                 {
    //                   type: 'date',
    //                   label: '日期',
    //                   span: 24,
    //                   display: true,
    //                   format: 'YYYY-MM-DD',
    //                   disableType: 'morethanToday',
    //                   valueFormat: 'YYYY-MM-DD',
    //                   prop: 'startTime',
    //                   defaultTime: [
    //                     '00:00:00',
    //                     '12:59:59'
    //                   ]
    //                 },
    //                 {
    //                   type: 'input',
    //                   label: '合同编号',
    //                   span: 24,
    //                   display: true,
    //                   prop: 'contractNo'
    //                 },
    //                 {
    //                   type: 'select',
    //                   label: '合同管理人',
    //                   dicData: [
    //                     {
    //                       label: '老张',
    //                       value: '1'
    //                     },
    //                     {
    //                       label: '老李',
    //                       value: '2'
    //                     },
    //                     {
    //                       label: '老郑',
    //                       value: '3'
    //                     }
    //                   ],
    //                   cascader: [],
    //                   span: 24,
    //                   display: true,
    //                   props: {
    //                     label: 'label',
    //                     value: 'value',
    //                     desc: 'desc'
    //                   },
    //                   prop: 'userId'
    //                 },
    //                 {
    //                   type: 'input',
    //                   label: '合同金额',
    //                   span: 24,
    //                   display: true,
    //                   prop: 'totalMoney'
    //                 }
    //               ],
    //             },
    //             prop: 'contactList',
    //             order: 1
    //           },
    //           {
    //             type: 'current-input',
    //             label: '金额',
    //             span: 12,
    //             display: true,
    //             showFileList: true,
    //             multiple: true,
    //             limit: 10,
    //             prop: 'money',
    //             order: 4,
    //             rules: [
    //               {
    //                 required: true,
    //                 message: '金额必填'
    //               }
    //             ]
    //           },
    //           {
    //             type: 'textarea',
    //             label: '多行文本',
    //             span: 12,
    //             order: 6,
    //             display: true,
    //             prop: 'textarea'
    //           }
    //         ],
    //         tplName: '测试表单',
    //         readonly: false,
    //         disabled: false,
    //         group: [
    //           {
    //             label: '诉讼申请1',
    //             prop: 'apply',
    //             arrow: false,
    //             collapse: true,
    //             display: true,
    //             order: 2,
    //             labelOperate: true,
    //             labelSlot: [
    //               {
    //                 text: '新增'
    //               },
    //               {
    //                 text: '查看'
    //               }
    //             ],
    //             column: [
    //               {
    //                 type: 'input',
    //                 label: '诉讼编号',
    //                 span: 6,
    //                 display: true,
    //                 prop: 'applyNo',
    //                 // isBr: true,
    //                 // isChange: true,
    //                 rules: [
    //                   {
    //                     required: true,
    //                     message: '诉讼编号必须填写'
    //                   },
    //                   {
    //                     pattern: '^[1]([3-9])[0-9]{9}$',
    //                     message: '诉讼编号格式不匹配'
    //                   }
    //                 ],
    //                 required: true,
    //                 patternType: '^[1]([3-9])[0-9]{9}$',
    //                 pattern: '^[1]([3-9])[0-9]{9}$'
    //               },
    //               {
    //                 type: 'blank',
    //                 label: '诉讼编号',
    //                 span: 6,
    //                 display: true
    //               },
    //               {
    //                 type: 'select',
    //                 label: '公司主体',
    //                 span: 6,
    //                 display: true,
    //                 // isBr: true,
    //                 props: {
    //                   label: 'label',
    //                   value: 'value',
    //                   desc: 'desc'
    //                 },
    //                 dicData: [
    //                   {
    //                     label: '选项一',
    //                     value: '0',
    //                     desc: '选项一'
    //                   },
    //                   {
    //                     label: '选项二',
    //                     value: '1',
    //                     desc: '选项二'
    //                   },
    //                   {
    //                     label: '选项三',
    //                     value: '2',
    //                     desc: '选项三'
    //                   }
    //                 ],
    //                 prop: 'firmId',
    //                 rules: [
    //                   {
    //                     required: true,
    //                     message: '公司主体必须填写'
    //                   }
    //                 ]
    //               },
    //               {
    //                 type: 'select',
    //                 label: '下拉多选',
    //                 span: 6,
    //                 display: true,
    //                 props: {
    //                   label: 'label',
    //                   value: 'value',
    //                   desc: 'desc'
    //                 },
    //                 dicData: [
    //                   {
    //                     label: '选项一',
    //                     value: '0',
    //                     desc: '选项一'
    //                   },
    //                   {
    //                     label: '选项二',
    //                     value: '1',
    //                     desc: '选项二'
    //                   },
    //                   {
    //                     label: '选项三',
    //                     value: '2',
    //                     desc: '选项三'
    //                   }
    //                 ],
    //                 multiple: true,
    //                 prop: 'select'
    //               },
    //               {
    //                 type: 'checkbox',
    //                 label: '复选框',
    //                 span: 6,
    //                 display: true,
    //                 props: {
    //                   label: 'label',
    //                   value: 'value',
    //                   desc: 'desc'
    //                 },
    //                 dicData: [
    //                   {
    //                     label: '选项一',
    //                     value: '0',
    //                     desc: '选项一'
    //                   },
    //                   {
    //                     label: '选项二',
    //                     value: '1',
    //                     desc: '选项二'
    //                   },
    //                   {
    //                     label: '选项三',
    //                     value: '2',
    //                     desc: '选项三'
    //                   }
    //                 ],
    //                 prop: 'checkbox'
    //               },
    //               {
    //                 type: 'input',
    //                 label: '创建人',
    //                 span: 6,
    //                 // isChange: true,
    //                 display: true,
    //                 prop: 'createName',
    //                 rules: [
    //                   {
    //                     required: true,
    //                     message: '创建人必须填写'
    //                   }
    //                 ]
    //               },
    //               {
    //                 type: 'date',
    //                 label: '创建时间',
    //                 span: 6,
    //                 display: true,
    //                 format: 'YYYY-MM-DD',
    //                 valueFormat: 'YYYY-MM-DD',
    //                 prop: 'createTime',
    //                 rules: [
    //                   {
    //                     required: true,
    //                     message: '创建时间必须填写'
    //                   }
    //                 ]
    //               },
    //               {
    //                 type: 'select',
    //                 label: '接口数据字典',
    //                 cascader: [],
    //                 span: 6,
    //                 display: true,
    //                 props: {
    //                   label: 'label',
    //                   value: 'value',
    //                   desc: 'desc'
    //                 },
    //                 prop: 'select_post',
    //                 dicUrl: '/get/treeData',
    //                 dicMethod: 'post',
    //                 dicQuery: {
    //                   firmId: '1'
    //                 }
    //               },
    //               {
    //                 type: 'select',
    //                 label: '接口数据字典2',
    //                 cascader: [],
    //                 span: 6,
    //                 display: true,
    //                 props: {
    //                   label: 'label',
    //                   value: 'value',
    //                   desc: 'desc'
    //                 },
    //                 prop: 'a164931251931697221',
    //                 dicUrl: '/get/treeData',
    //                 dicMethod: 'post',
    //                 dicQuery: {
    //                   firmId: '1',
    //                   userId: '${}'
    //                 }
    //               },
    //               {
    //                 type: 'input',
    //                 label: '隐藏域',
    //                 span: 6,
    //                 display: false,
    //                 prop: 'id'
    //               },
    //               {
    //                 type: 'button',
    //                 label: '按钮',
    //                 span: 6,
    //                 display: true,
    //                 prop: 'id',
    //                 buttonType: 'danger',
    //                 buttonText: '新增列表'
    //               }
    //             ]
    //           }
    //         ]
    //       }
    const option = {
  column: [
    {
      type: 'title',
      span: 24,
      display: true,
      styles: {
        fontSize: '18px',
        color: '#000'
      },
      labelWidth: '0px',
      value: '标题',
      prop: 'a165690637117839745',
      label: '列表',
      level: 1,
      order: '1'
    },
    {
      type: 'title',
      span: 24,
      display: true,
      styles: {
        fontSize: '18px',
        color: '#000'
      },
      labelWidth: '0px',
      value: '标题',
      prop: 'a16569064335602549',
      level: 2,
      label: '列表1',
      order: '2'
    },
    {
      type: 'dynamic',
      span: 24,
      display: true,
      labelPosition: 'top',
      children: {
        align: 'center',
        headerAlign: 'center',
        index: false,
        addBtn: true,
        delBtn: true,
        column: [
          {
            type: 'input',
            label: '单行文本',
            span: 24,
            display: true,
            prop: 'a165690638389995172'
          },
          {
            type: 'input',
            label: '单行文本',
            span: 24,
            display: true,
            prop: 'a165690638582040568'
          },
          {
            type: 'input',
            label: '单行文本',
            span: 24,
            display: true,
            prop: 'a165690638875945694'
          }
        ],
        operateBtnList: []
      },
      prop: 'a165690636234632667',
      labelSlot: [],
      postQueryConfig: [],
      order: '3'
    },
    {
      type: 'title',
      span: 24,
      display: true,
      styles: {
        fontSize: '18px',
        color: '#000'
      },
      labelWidth: '0px',
      value: '标题',
      prop: 'a165690645590357895',
      level: 2,
      label: '列表2',
      order: '4'
    },
    {
      type: 'dynamic',
      span: 24,
      display: true,
      labelPosition: 'top',
      children: {
        align: 'center',
        headerAlign: 'center',
        index: false,
        addBtn: true,
        delBtn: true,
        column: [
          {
            type: 'input',
            label: '单行文本',
            span: 24,
            display: true,
            prop: 'a165690647027379900'
          },
          {
            type: 'input',
            label: '单行文本',
            span: 24,
            display: true,
            prop: 'a165690647171844775'
          },
          {
            type: 'input',
            label: '单行文本',
            span: 24,
            display: true,
            prop: 'a165690647370863841'
          }
        ],
        operateBtnList: []
      },
      prop: 'a165690644754742675',
      labelSlot: [],
      postQueryConfig: [],
      order: '5'
    },
    {
      type: 'title',
      span: 24,
      display: true,
      styles: {
        fontSize: '18px',
        color: '#000'
      },
      labelWidth: '0px',
      value: '标题',
      prop: 'a16569064891109114',
      level: 1,
      label: '分组',
      order: '6'
    },
    {
      type: 'title',
      span: 24,
      display: true,
      styles: {
        fontSize: '18px',
        color: '#000'
      },
      labelWidth: '0px',
      value: '标题',
      prop: 'a165690650088085756',
      level: 2,
      label: '分组1',
      order: '7'
    },
    {
      type: 'title',
      span: 24,
      display: true,
      styles: {
        fontSize: '18px',
        color: '#000'
      },
      labelWidth: '0px',
      value: '标题',
      prop: 'a165690653149572331',
      level: 2,
      label: '分组2',
      order: '9'
    }
  ],
  labelPosition: 'right',
  labelSuffix: '：',
  labelWidth: 120,
  gutter: 0,
  menuBtn: true,
  submitBtn: true,
  submitText: '提交',
  temporaryText: '暂存',
  temporaryBtn: true,
  emptyBtn: true,
  emptyText: '清空',
  menuPosition: 'center',
  tplName: '2513',
  nodeRules: [],
  essenceRules: [],
  interactRules: [],
  group: [
    {
      label: '',
      prop: 'a165690651745013370',
      arrow: false,
      collapse: true,
      display: true,
      order: '8',
      labelSlot: [],
      column: [
        {
          type: 'input',
          label: '单行文本',
          span: 12,
          display: true,
          prop: 'a165690652286144369'
        },
        {
          type: 'input',
          label: '单行文本',
          span: 12,
          display: true,
          prop: 'a165690652430281582'
        },
        {
          type: 'input',
          label: '单行文本',
          span: 12,
          display: true,
          prop: 'a165690652654974005'
        },
        {
          type: 'input',
          label: '单行文本',
          span: 12,
          display: true,
          prop: 'a165690652852467109'
        }
      ]
    },
    {
      label: '',
      prop: 'a165690654339066627',
      arrow: false,
      collapse: true,
      display: true,
      order: '10',
      labelSlot: [],
      column: [
        {
          type: 'input',
          label: '单行文本',
          span: 12,
          display: true,
          prop: 'a16569065496534313'
        },
        {
          type: 'input',
          label: '单行文本',
          span: 12,
          display: true,
          prop: 'a165690655147667215'
        },
        {
          type: 'input',
          label: '单行文本',
          span: 12,
          display: true,
          prop: 'a16569065543827381'
        }
      ]
    }
  ]
}
    var app = Vue.createApp({
      data() {
        return {
          otherPostData: {
            userId: 113,
            contractId: 4321
          },
          form: {
            // 表格回显
            contractList: [
              {
                contractNo: 'HSDE1234567',
                startTime: '2033-03-05',
                userId: '2',
                totalMoney: 18754845,
                id: 1
              },
              {
                contractNo: 'HFDE1234567',
                startTime: '2022-03-04',
                userId: '3',
                totalMoney: 8765432,
                id: 4
              },
              {
                contractNo: 'HFDE1234567',
                startTime: '2022-03-04',
                userId: '3',
                totalMoney: 8765432,
                id: 3
              }
            ],
            contactList: [
              {
                contractNo: 'HSDE1234567',
                startTime: '2022-01-04',
                userId: '2',
                totalMoney: 18754845,
                id: 1
              },
              {
                contractNo: 'HFDE1234567',
                startTime: '2022-03-04',
                userId: '3',
                totalMoney: 8765432,
                id: 2
              }
            ],
            // 平铺
            applyNo: '17600141556',
            firmId: '0',
            checkbox: ['0', '1'],
            createName: '老张',
            createTime: '2022-03-02',
            textarea: '海尔产业金融是国内领先的产业综合运营服务平台，成立于2013年12月，主要控股股东为海尔集团（青岛）金盈控股有限公司。 平台致力于通过融资租赁、商业保理及其他增值服务，为客户提供一站式金融服务解决方案',
            fileList: [
              {"label": "226d5c1a_video.png", "value": 'https://www.w3school.com.cn/i/movie.ogg'},
              {"label": "226d5c1a_video.png", "value": 'https://www.w3school.com.cn/i/movie.ogg'}
            ],
            id: 5,
            money: '',
            tableList: [
              {
                startTime: '2022-05-06',
                contractNo: 'DDFE124564',
                belongUser: '老李1',
                user: '老张1',
                oprationUser: '老王1',
                id: 1,
                money: 12343434
              },
              {
                startTime: '2022-05-06',
                contractNo: 'DDFE124564',
                belongUser: '老李2',
                user: '老张2',
                oprationUser: '老王2',
                id: 2,
                money: 12343434
              },
              {
                startTime: '2022-05-05',
                contractNo: 'DDFE124564',
                belongUser: '老李3',
                user: '老张3',
                oprationUser: '老王3',
                id: 3,
                money: 12343434
              },
              {
                startTime: '2022-05-05',
                contractNo: 'DDFE124564',
                belongUser: '老李4',
                user: '老张4',
                oprationUser: '老王4',
                id: 4,
                money: 12343434
              }
            ],
            select: ['1', '2']
          },
          option: {},
        };
      },
      created() {
        // const diffKey = ['createName', 'applyNo']
        // diffKey.forEach(item => {
        //   let firmId_control = this.findObject(this.option.group, item)
        //   firmId_control.isChange = true
        // })
        this.option = option
      },
      methods: {
        add() {
          this.option = option
        },
        submitError() {},
        submitSuccess() {},
        // type: add detail delte link
        operateBtnClick(row, prop, type) {
          console.log(row, prop, '操作点击>>>>')
          // const { id } = row
          // if (type === 'link' && prop === 'contractList') {
          //   this.$router.push({
          //     path: '/test',
          //     query: {
          //       id: id
          //     }
          //   })
          // }

          // if (type === 'delet' && prop === 'contractList') {
          //   http.request('删除接口', {
          //     id: id
          //   }).then(data => {

          //   })
          // }
        },
        tableTitleClick(prop) {
          console.log(prop, 'prop>>>>>')
        },
        handleSubmit(form, done) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              console.log(form, "form>>>>>");
              // 防止重复提交
              done();
            }
          });
        },
      }, 
    });
    app.config.warnHandler = () => null
    app.use(ElementPlus);
    app.use(AVUE);
    app.mount("#app");
  </script>
</html>
